<template>
<div class="statistics-page card" style="padding:20px;">
<h3>销售统计（最近7天）</h3>
<div ref="chart" style="width:100%;height:400px;"></div>
</div>
</template>

<script>
import * as echarts from 'echarts'
export default {
data(){return{
sales:[
{date:'05-21',amount:1200},
{date:'05-22',amount:1800},
{date:'05-23',amount:1500},
{date:'05-24',amount:2200},
{date:'05-25',amount:2000},
{date:'05-26',amount:2500},
{date:'05-27',amount:2700}
]
}},
mounted(){
const chart=echarts.init(this.$refs.chart)
chart.setOption({
title:{text:'每日销售额',left:'center'},
tooltip:{trigger:'axis',formatter:p=>`${p[0].axisValue}<br/>￥${p[0].data}`},
xAxis:{type:'category',data:this.sales.map(i=>i.date)},
yAxis:{type:'value',axisLabel:{formatter:'￥{value}'}},
series:[{data:this.sales.map(i=>i.amount),type:'bar',barMaxWidth:40,itemStyle:{color:'var(--color-primary)'}}]
})
window.addEventListener('resize',()=>chart.resize())
}
}
</script>

<style scoped>
@import '@/assets/theme.css';
.statistics-page{margin-top:20px;}
.statistics-page h3{margin-bottom:20px;}
</style>